<template>
	<view class="loading-container" v-show="show">
		<view class="loading-mask"></view>
		<view class="loading-content">
			<view class="loading-icon">
				<text class="fa fa-circle-o-notch fa-spin"></text>
			</view>
			<view class="loading-text" v-if="message">{{ message }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'CustomLoading',
		props: {
			show: {
				type: Boolean,
				default: false
			},
			message: {
				type: String,
				default: '加载中...'
			}
		}
	}
</script>

<style scoped>
	.loading-container {
		/* position: relative;
		width: 100%;
		height: 100%; */
	}

	.loading-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/* background-color: rgba(255, 255, 255, 0.7); */
		z-index: 998;
	}

	.loading-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 15px 20px;
		background-color: rgba(0, 0, 0, 0.7);
		color: #fff;
		border-radius: 8px;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 999;
	}

	.loading-icon {
		font-size: 24px;
		margin-bottom: 8px;
	}

	.loading-text {
		font-size: 14px;
	}
</style>